<template>
  <div class="content">
    <div id="map"></div>
    <!-- <sm-web-map :map-options="mapOptions">
  
</sm-web-map> -->
    <!-- <sm-web-map server-url="https://iportal.supermap.io/iportal/" map-id="801571284">
  <sm-tdt-route position="top-left" :data="{tk:'1d109683f4d84198e37a38c442d68311'}"></sm-tdt-route>
</sm-web-map> -->
  </div>
</template>

<script>
import bus from '@/static/js/eventBus'
export default {
  name: 'smallMap',
  components: {},
  props: {
    getIframe: Boolean,
    newFloor: String, //楼层
  },
  data() {
    return {
      mapOptions: {
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              // "attribution": attribution,
              type: 'raster',
              tiles: [
                window._CONFIG['serveUrl'] +
                  ':8090/iserver/services/map-XingZhengLou2CengWGS84/rest/maps/行政楼2层/zxyTileImage.png?z={z}&x={x}&y={y}',
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              //   minzoom: 0,
              //   maxzoom: 22,
            },
          ],
        },
        dragRotate: false,
        center: [109.53143250789435, 18.30997276579177],
        zoom: 19.5,
        pitch: 0,
        maxBounds: [
          // Southwest
          [109.53097495857588, 18.30969997703417],
          [109.53199251265494, 18.310360137022514],
        ], // Northeast
      },
      geojson: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              message: 'http://192.168.20.251:8080/room/tour.html',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53148402122804, 18.31018674249782],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: 'http://192.168.20.251:8080/room/tour.html',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.5314828805054, 18.31016365324122],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: 'http://192.168.20.251:8080/room/tour.html',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53141142018444, 18.310190400521023],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: 'http://192.168.20.251:8080/room/tour.html',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53140954465704, 18.31015972254376],
            },
          },
        ],
      },
      information: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              message: '1',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53145263269022, 18.310189236227373],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '2',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53146772011542, 18.310189395378316],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '3',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53145263269022, 18.31017682248944],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '4',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53146755247849, 18.310177299940733],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '5',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53145280032874, 18.31016504535212],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '6',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53146772011542, 18.31016488620193],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '7',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.5314976744919, 18.310188828154295],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '8',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.53149784213048, 18.31017689186683],
            },
          },
          {
            type: 'Feature',
            properties: {
              message: '9',
              description: '<h1>Hello World!</h1>',
            },
            geometry: {
              type: 'Point',
              coordinates: [109.5314976744919, 18.310164955579324],
            },
          },
        ],
      },
      pop: [],
      title: [],
      range: '',
      mapstyle: '',
    }
  },
  //  props: ['positionses'],
  mounted() {
    var map = new mapboxgl.Map(this.mapOptions)
    window.map = map

    // map.on('load', function () {
    //   map.addLayer({
    //     id: 'route',
    //     type: 'line',
    //     source: {
    //       type: 'geojson',
    //       data: {
    //         type: 'Feature',
    //         properties: {},
    //         geometry: {
    //           type: 'LineString',
    //           coordinates: [
    //  [109.53162059999526, 18.31014247986342],
    //     [109.531739022721, 18.30999431082539],
    //     [109.53172058214824, 18.309990675841945],
    //     [109.53162059999526, 18.31014247986342],
    //           ],
    //         },
    //       },
    //     },
    //     layout: {
    //       'line-join': 'round',
    //       'line-cap': 'round',
    //     },
    //     paint: {
    //       'line-color': '#888',
    //       'line-width': 8,
    //     },
    //   })
    // })

    this.initmap()

    map.on('click', function (e) {
      console.log(e.point)
      console.log('x:' + e.lngLat.lng + ',y:' + e.lngLat.lat)
      let pickPosition = { longitude: e.lngLat.lng, latitude: e.lngLat.lat }
      let queryUrl = 'http://192.168.20.251:8090/iserver/services/data-XingZhengLou2CengWGS84/rest/data'
      let queryDatasetNames = [
        'WGS84:房间2000经纬度',
        'WGS84:地物2000经纬度',
        'WGS84:楼梯2000经纬度',
        'WGS84:阳台2000经纬度',
        'WGS84:墙壁2000经纬度',
        'WGS84:走廊2000经纬度',
        'WGS84:门2000经纬度',
        'WGS84:门口2000经纬度',
      ]

      queryByGeometryService(
        pickPosition,
        queryUrl,
        queryDatasetNames,
        (respResult) => {
          // 获取查询结果属性，对象形式
          let attributes = respResult.result.features[0].attributes

          console.log('查询成功', attributes)
        },
        (failedResult) => {
          console.log('查询失败', failedResult)
        }
      )

      /**
       * 空间查询
       */
      function queryByGeometryService(
        pickPosition,
        queryUrl,
        queryDatasetNames,
        onQueryCompleteCallback,
        onQueryFailedCallback
      ) {
        // 数据判断
        if (!pickPosition) {
          console.log(`queryByGeometryService()，未传递查询位置。`)
          return
        }

        if (!queryUrl) {
          console.log(`queryByGeometryService()，未传递查询服务地址。`)
          return
        }

        if (!queryDatasetNames) {
          console.log(`queryByGeometryService()，未传递查询数据集。`)
          return
        } else if (queryDatasetNames && typeof queryDatasetNames === 'string') {
          // 查询数据集传递进来的是字符串
          queryDatasetNames = [queryDatasetNames]
        }

        // 根据坐标构建查询点
        let geometry = new SuperMap.Geometry.Point(pickPosition.longitude, pickPosition.latitude)

        // 构建查询参数
        let getFeaturesByGeometryParameters = new SuperMap.REST.GetFeaturesByGeometryParameters({
          datasetNames: queryDatasetNames,
          toIndex: -1,
          spatialQueryMode: SuperMap.REST.SpatialQueryMode.INTERSECT,
          geometry: geometry,
        })
        let getFeaturesByGeometryService = new SuperMap.REST.GetFeaturesByGeometryService(queryUrl, {
          eventListeners: {
            processCompleted: onQueryCompleteCallback, // 查询成功回调
            processFailed: onQueryFailedCallback, // 查询失败回调
          },
        })

        //  发送查询
        getFeaturesByGeometryService.processAsync(getFeaturesByGeometryParameters)
      }
    })

    let _this = this
    bus.$on('getnewData', (data) => {
      // console.log(data)
      var cc = document.createElement('marker')
      cc.style.backgroundImage = 'url(/haiyuan/static/img/' + data.type + '-' + data.direction + '.png)'
      if (data.type == '办公桌') {
        if (data.direction == '东' || data.direction == '西') {
          cc.style.width = '32' + 'px'
          cc.style.height = '66' + 'px'
        } else {
          cc.style.width = '66' + 'px'
          cc.style.height = '32' + 'px'
        }
      } else if (data.type == '档案柜') {
        cc.style.width = '66' + 'px'
        cc.style.height = '66' + 'px'
      } else if (data.type == '电脑') {
        if (data.direction == '东' || data.direction == '西') {
          cc.style.width = '37' + 'px'
          cc.style.height = '60' + 'px'
          cc.style.zIndex = '666'
        } else {
          cc.style.width = '60' + 'px'
          cc.style.height = '37' + 'px'
          cc.style.zIndex = '666'
        }
      } else if (data.type == '椅子') {
        cc.style.width = '29' + 'px'
        cc.style.height = '29' + 'px'
      } else if (data.type == '保险柜') {
        cc.style.width = '66' + 'px'
        cc.style.height = '66' + 'px'
      }

      var mapboxcc = new mapboxgl.Marker(cc, {
        draggable: true,
      })
        .setLngLat([data.y, data.x])
        .addTo(map)

      function onDragEnd() {
        var lngLat = mapboxcc.getLngLat()
        _this.axios
          .put('/assets/edit ', {
            id: data.id,
            x: lngLat.lat,
            y: lngLat.lng,
          })
          .then((res) => {
            // console.log(res)
          })
        data.y = lngLat.lng
        data.x = lngLat.lat
      }
      mapboxcc.on('dragend', onDragEnd)

      cc.addEventListener(
        'click',
        function () {
          map.flyTo({
            center: [data.y, data.x],
            zoom: 22,
            speed: 0.9,
            curve: 1,
            easing(t) {
              return t
            },
          })
          _this.$emit('getEll', cc)
          _this.$emit('getMember', data.member)
        },
        false
      )

      var cx = document.createElement('marker')
      var timer = null
      cc.addEventListener(
        'mouseenter',
        function () {
          if (timer) clearTimeout(timer)
          // console.log(100*el.style.transform[32]+10*el.style.transform[33]+1*el.style.transform[34])
          // console.log(100*el.style.transform[39]+10*el.style.transform[40]+1*el.style.transform[41])
          // cx.style.transform='translata('+100*el.style.transform[32]+10*el.style.transform[33]+1*el.style.transform[34]+'px,'+100*el.style.transform[39]+10*el.style.transform[40]+1*el.style.transform[41]+'px)'
          // cx.style.display = 'block'
          cx.style.backgroundImage = 'url(/haiyuan/static/img/fx.png)'
          cx.style.width = '30' + 'px'
          cx.style.height = '30' + 'px'
          cx.style.zIndex = '667'
          var mapboxcx = new mapboxgl.Marker(cx).setLngLat([data.y + 0.000005, data.x]).addTo(map)

          _this.axios
            .get('/assets/findAssetsByFloor', {
              params: {
                floor: this.newFloor,
                member: data.member,
              },
            })
            .then(({ result }) => {
              var alll = result.records
              console.log(alll)
              console.log(alll[0].direction)
              cx.addEventListener(
                'click',
                function () {
                  if (alll[0].direction == '东') {
                    cc.style.backgroundImage = 'url(/haiyuan/static/img/' + data.type + '-南.png)'
                    if (data.type == '办公桌') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '32' + 'px'
                    } else if (data.type == '档案柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    } else if (data.type == '电脑') {
                      cc.style.width = '60' + 'px'
                      cc.style.height = '37' + 'px'
                      cc.style.zIndex = '666'
                    } else if (data.type == '椅子') {
                      cc.style.width = '29' + 'px'
                      cc.style.height = '29' + 'px'
                    } else if (data.type == '保险柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    }

                    _this.axios
                      .put('/assets/edit ', {
                        id: data.id,
                        direction: '南',
                      })
                      .then((res) => {
                        console.log(res)
                      })
                  } else if (alll[0].direction == '南') {
                    cc.style.backgroundImage = 'url(/haiyuan/static/img/' + data.type + '-西.png)'
                    if (data.type == '办公桌') {
                      cc.style.width = '32' + 'px'
                      cc.style.height = '66' + 'px'
                    } else if (data.type == '档案柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    } else if (data.type == '电脑') {
                      cc.style.width = '37' + 'px'
                      cc.style.height = '60' + 'px'
                      cc.style.zIndex = '666'
                    } else if (data.type == '椅子') {
                      cc.style.width = '29' + 'px'
                      cc.style.height = '29' + 'px'
                    } else if (data.type == '保险柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    }

                    _this.axios
                      .put('/assets/edit ', {
                        id: data.id,
                        direction: '西',
                      })
                      .then((res) => {
                        console.log(res)
                      })
                  } else if (alll[0].direction == '西') {
                    cc.style.backgroundImage = 'url(/haiyuan/static/img/' + data.type + '-北.png)'
                    if (data.type == '办公桌') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '32' + 'px'
                    } else if (data.type == '档案柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    } else if (data.type == '电脑') {
                      cc.style.width = '60' + 'px'
                      cc.style.height = '37' + 'px'
                      cc.style.zIndex = '666'
                    } else if (data.type == '椅子') {
                      cc.style.width = '29' + 'px'
                      el.style.height = '29' + 'px'
                    } else if (data.type == '保险柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    }

                    _this.axios
                      .put('/assets/edit ', {
                        id: data.id,
                        direction: '北',
                      })
                      .then((res) => {
                        console.log(res)
                      })
                  } else if (alll[0].direction == '北') {
                    cc.style.backgroundImage = 'url(/haiyuan/static/img/' + data.type + '-东.png)'
                    if (data.type == '办公桌') {
                      cc.style.width = '32' + 'px'
                      cc.style.height = '66' + 'px'
                    } else if (data.type == '档案柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    } else if (data.type == '电脑') {
                      cc.style.width = '37' + 'px'
                      cc.style.height = '60' + 'px'
                      cc.style.zIndex = '666'
                    } else if (data.type == '椅子') {
                      cc.style.width = '29' + 'px'
                      cc.style.height = '29' + 'px'
                    } else if (data.type == '保险柜') {
                      cc.style.width = '66' + 'px'
                      cc.style.height = '66' + 'px'
                    }

                    _this.axios
                      .put('/assets/edit ', {
                        id: data.id,
                        direction: '东',
                      })
                      .then((res) => {
                        console.log(res)
                      })
                  }
                  mapboxcx.remove()
                },
                false
              )
            })

          cc.addEventListener(
            'mouseleave',
            function () {
              timer = setTimeout(function () {
                mapboxcx.remove()
              }, 1000)
            },
            false
          )
        },
        false
      )
    })
  },
  watch: {
    positionses(n, o) {
      if (o != '') {
      }
    },
  },
  methods: {
    initmap() {
      let _this = this
      // console.log(this.positionses[0]);
      this.axios
        .get('/assets/findAssetsByFloor', {
          params: {
            floor: this.newFloor,
          },
        })
        .then(({ result }) => {
          var all = result.records
          console.log(all)
          all.forEach((all, index) => {
            // create a DOM element for the marker
            var el = document.createElement('marker')
            el.className = 'marker'
            el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-' + all.direction + '.png)'
            if (all.type_dictText == '办公桌') {
              if (all.direction == '东' || all.direction == '西') {
                el.style.width = '32' + 'px'
                el.style.height = '66' + 'px'
              } else {
                el.style.width = '66' + 'px'
                el.style.height = '32' + 'px'
              }
            } else if (all.type_dictText == '档案柜') {
              el.style.width = '66' + 'px'
              el.style.height = '66' + 'px'
            } else if (all.type_dictText == '电脑') {
              if (all.direction == '东' || all.direction == '西') {
                el.style.width = '37' + 'px'
                el.style.height = '60' + 'px'
                el.style.zIndex = '666'
              } else {
                el.style.width = '60' + 'px'
                el.style.height = '37' + 'px'
                el.style.zIndex = '666'
              }
            } else if (all.type_dictText == '椅子') {
              el.style.width = '29' + 'px'
              el.style.height = '29' + 'px'
            } else if (all.type_dictText == '保险柜') {
              el.style.width = '66' + 'px'
              el.style.height = '66' + 'px'
            }

            var mapboxl = new mapboxgl.Marker(el, {
              draggable: true,
            })
              .setLngLat([all.y, all.x])
              .addTo(map)
            mapboxl.remove()
            //当鼠标滚动时，触发事件，获取当前地图缩放级别
            map.on('move', function () {
              _this.range = map.getZoom()
              // console.log(range)
              if (_this.range < 21.9) {
                mapboxl.remove()
              } else {
                var mapboxll = new mapboxgl.Marker(el, {
                  draggable: true,
                })
                  .setLngLat([all.y, all.x])
                  .addTo(map)

                _this.pop.push({
                  id: all.id,
                  member: all.member,
                })

                function onDragEnd() {
                  var lngLat = mapboxll.getLngLat()
                  console.log(index, lngLat.lng, lngLat.lat)
                  _this.axios
                    .put('/assets/edit ', {
                      id: _this.pop[index].id,
                      x: lngLat.lat,
                      y: lngLat.lng,
                    })
                    .then((res) => {
                      // console.log(res)
                    })
                  all.y = lngLat.lng
                  all.x = lngLat.lat
                }
                mapboxll.on('dragend', onDragEnd)
              }
            })

            el.addEventListener(
              'click',
              function () {
                map.flyTo({
                  center: [all.y, all.x],
                  zoom: 22,
                  speed: 0.9,
                  curve: 1,
                  easing(t) {
                    return t
                  },
                })
                _this.$emit('getEl', el)
                let flag = all.id
                _this.$emit('creatPopup', flag)
              },
              false
            )

            var cx = document.createElement('marker')
            var timer = null
            el.addEventListener(
              'mouseenter',
              function () {
                if (timer) clearTimeout(timer)
                // console.log(100*el.style.transform[32]+10*el.style.transform[33]+1*el.style.transform[34])
                // console.log(100*el.style.transform[39]+10*el.style.transform[40]+1*el.style.transform[41])
                // cx.style.transform='translata('+100*el.style.transform[32]+10*el.style.transform[33]+1*el.style.transform[34]+'px,'+100*el.style.transform[39]+10*el.style.transform[40]+1*el.style.transform[41]+'px)'
                // cx.style.display = 'block'
                cx.style.backgroundImage = 'url(/haiyuan/static/img/fx.png)'
                cx.style.width = '30' + 'px'
                cx.style.height = '30' + 'px'
                cx.style.zIndex = '667'
                var mapboxcx = new mapboxgl.Marker(cx).setLngLat([all.y + 0.000005, all.x]).addTo(map)

                _this.axios
                  .get('/assets/findAssetsByFloor', {
                    params: {
                      floor: this.newFloor,
                      member: _this.pop[index].member,
                    },
                  })
                  .then(({ result }) => {
                    var alll = result.records
                    console.log(alll[0].direction)
                    cx.addEventListener(
                      'click',
                      function () {
                        if (alll[0].direction == '东') {
                          el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-南.png)'
                          if (all.type_dictText == '办公桌') {
                            el.style.width = '66' + 'px'
                            el.style.height = '32' + 'px'
                          } else if (all.type_dictText == '档案柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          } else if (all.type_dictText == '电脑') {
                            el.style.width = '60' + 'px'
                            el.style.height = '37' + 'px'
                            el.style.zIndex = '666'
                          } else if (all.type_dictText == '椅子') {
                            el.style.width = '29' + 'px'
                            el.style.height = '29' + 'px'
                          } else if (all.type_dictText == '保险柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          }

                          _this.axios
                            .put('/assets/edit ', {
                              id: _this.pop[index].id,
                              direction: '南',
                            })
                            .then((res) => {
                              // console.log(res)
                            })
                        } else if (alll[0].direction == '南') {
                          el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-西.png)'
                          if (all.type_dictText == '办公桌') {
                            el.style.width = '32' + 'px'
                            el.style.height = '66' + 'px'
                          } else if (all.type_dictText == '档案柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          } else if (all.type_dictText == '电脑') {
                            el.style.width = '37' + 'px'
                            el.style.height = '60' + 'px'
                            el.style.zIndex = '666'
                          } else if (all.type_dictText == '椅子') {
                            el.style.width = '29' + 'px'
                            el.style.height = '29' + 'px'
                          } else if (all.type_dictText == '保险柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          }

                          _this.axios
                            .put('/assets/edit ', {
                              id: _this.pop[index].id,
                              direction: '西',
                            })
                            .then((res) => {
                              // console.log(res)
                            })
                        } else if (alll[0].direction == '西') {
                          el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-北.png)'
                          if (all.type_dictText == '办公桌') {
                            el.style.width = '66' + 'px'
                            el.style.height = '32' + 'px'
                          } else if (all.type_dictText == '档案柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          } else if (all.type_dictText == '电脑') {
                            el.style.width = '60' + 'px'
                            el.style.height = '37' + 'px'
                            el.style.zIndex = '666'
                          } else if (all.type_dictText == '椅子') {
                            el.style.width = '29' + 'px'
                            el.style.height = '29' + 'px'
                          } else if (all.type_dictText == '保险柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          }

                          _this.axios
                            .put('/assets/edit ', {
                              id: _this.pop[index].id,
                              direction: '北',
                            })
                            .then((res) => {
                              // console.log(res)
                            })
                        } else if (alll[0].direction == '北') {
                          el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-东.png)'
                          if (all.type_dictText == '办公桌') {
                            el.style.width = '32' + 'px'
                            el.style.height = '66' + 'px'
                          } else if (all.type_dictText == '档案柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          } else if (all.type_dictText == '电脑') {
                            el.style.width = '37' + 'px'
                            el.style.height = '60' + 'px'
                            el.style.zIndex = '666'
                          } else if (all.type_dictText == '椅子') {
                            el.style.width = '29' + 'px'
                            el.style.height = '29' + 'px'
                          } else if (all.type_dictText == '保险柜') {
                            el.style.width = '66' + 'px'
                            el.style.height = '66' + 'px'
                          }

                          _this.axios
                            .put('/assets/edit ', {
                              id: _this.pop[index].id,
                              direction: '东',
                            })
                            .then((res) => {
                              // console.log(res)
                            })
                        }
                        mapboxcx.remove()
                      },
                      false
                    )
                  })

                el.addEventListener(
                  'mouseleave',
                  function () {
                    timer = setTimeout(function () {
                      mapboxcx.remove()
                    }, 1000)
                  },
                  false
                )
              },
              false
            )

            // add marker to map
            el.addEventListener(
              'mousedown',
              function onMouseDown(event) {
                if (event.button == 1) {
                  _this.axios
                    .get('/assets/findAssetsByFloor', {
                      params: {
                        floor: this.newFloor,
                        member: _this.pop[index].member,
                      },
                    })
                    .then(({ result }) => {
                      var alll = result.records
                      console.log(alll[0].direction)
                      if (alll[0].direction == '东') {
                        el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-南.png)'
                        if (all.type_dictText == '办公桌') {
                          el.style.width = '66' + 'px'
                          el.style.height = '32' + 'px'
                        } else if (all.type_dictText == '档案柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        } else if (all.type_dictText == '电脑') {
                          el.style.width = '60' + 'px'
                          el.style.height = '37' + 'px'
                          el.style.zIndex = '666'
                        } else if (all.type_dictText == '椅子') {
                          el.style.width = '29' + 'px'
                          el.style.height = '29' + 'px'
                        } else if (all.type_dictText == '保险柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        }

                        _this.axios
                          .put('/assets/edit ', {
                            id: _this.pop[index].id,
                            direction: '南',
                          })
                          .then((res) => {
                            // console.log(res)
                          })
                      } else if (alll[0].direction == '南') {
                        el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-西.png)'
                        if (all.type_dictText == '办公桌') {
                          el.style.width = '32' + 'px'
                          el.style.height = '66' + 'px'
                        } else if (all.type_dictText == '档案柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        } else if (all.type_dictText == '电脑') {
                          el.style.width = '37' + 'px'
                          el.style.height = '60' + 'px'
                          el.style.zIndex = '666'
                        } else if (all.type_dictText == '椅子') {
                          el.style.width = '29' + 'px'
                          el.style.height = '29' + 'px'
                        } else if (all.type_dictText == '保险柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        }

                        _this.axios
                          .put('/assets/edit ', {
                            id: _this.pop[index].id,
                            direction: '西',
                          })
                          .then((res) => {
                            // console.log(res)
                          })
                      } else if (alll[0].direction == '西') {
                        el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-北.png)'
                        if (all.type_dictText == '办公桌') {
                          el.style.width = '66' + 'px'
                          el.style.height = '32' + 'px'
                        } else if (all.type_dictText == '档案柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        } else if (all.type_dictText == '电脑') {
                          el.style.width = '60' + 'px'
                          el.style.height = '37' + 'px'
                          el.style.zIndex = '666'
                        } else if (all.type_dictText == '椅子') {
                          el.style.width = '29' + 'px'
                          el.style.height = '29' + 'px'
                        } else if (all.type_dictText == '保险柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        }

                        _this.axios
                          .put('/assets/edit ', {
                            id: _this.pop[index].id,
                            direction: '北',
                          })
                          .then((res) => {
                            // console.log(res)
                          })
                      } else if (alll[0].direction == '北') {
                        el.style.backgroundImage = 'url(/haiyuan/static/img/' + all.type_dictText + '-东.png)'
                        if (all.type_dictText == '办公桌') {
                          el.style.width = '32' + 'px'
                          el.style.height = '66' + 'px'
                        } else if (all.type_dictText == '档案柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        } else if (all.type_dictText == '电脑') {
                          el.style.width = '37' + 'px'
                          el.style.height = '60' + 'px'
                          el.style.zIndex = '666'
                        } else if (all.type_dictText == '椅子') {
                          el.style.width = '29' + 'px'
                          el.style.height = '29' + 'px'
                        } else if (all.type_dictText == '保险柜') {
                          el.style.width = '66' + 'px'
                          el.style.height = '66' + 'px'
                        }

                        _this.axios
                          .put('/assets/edit ', {
                            id: _this.pop[index].id,
                            direction: '东',
                          })
                          .then((res) => {
                            // console.log(res)
                          })
                      }
                    })
                }
              },
              false
            )
          })
        })

      this.geojson.features.forEach(function (marker) {
        // create a DOM element for the marker
        var el = document.createElement('marker')
        el.className = 'marker'
        // // el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)'
        el.style.backgroundImage = 'url(/haiyuan/static/img/krpano.png)'
        el.style.width = '47' + 'px'
        el.style.height = '60' + 'px'
        el.addEventListener('click', function () {
          // window.open(marker.properties.message)
          _this.$emit('iframeSRC', marker.properties.message)
          // _this.getIframe = true
          _this.$emit('setIframe', _this.getIframe)
          map.flyTo({
            center: marker.geometry.coordinates,
            zoom: 22,
            speed: 0.9,
            curve: 1,
            easing(t) {
              return t
            },
          })
        })
        var mapboxl = new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map)
        mapboxl.remove()
        //当鼠标滚动时，触发事件，获取当前地图缩放级别
        map.on('move', function () {
          _this.range = map.getZoom()
          // console.log(range)
          if (_this.range < 21.9) {
            mapboxl.remove()
          } else {
            new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map)
          }
        })
        // add marker to map
      })

      map.on('contextmenu', function (e) {
        // console.log(e.point)
        console.log('x:' + e.lngLat.lng + ',y:' + e.lngLat.lat)
        bus.$emit('getLongitude', e.lngLat.lng)
        bus.$emit('getLatitude', e.lngLat.lat)
        // map.flyTo({
        //     center:[e.lngLat.lng,e.lngLat.lat],
        //     zoom: 22,
        //     speed: 0.9,
        //     curve: 1,
        //     easing(t) {
        //       return t
        //     },
        //   })
      })
    },
    init() {
      // map.flyTo({
      //     center: [109.53143250789435, 18.30997276579177],
      //     zoom: 19.5,
      //     speed: 0.5,
      //     curve: 2,
      //     easing(t) {
      //         return t
      //     },
      // })
      this.initmap()
    },
    fly(x, y) {
      map.flyTo({
        center: [x, y],
        zoom: 22,
        speed: 0.5,
        curve: 2,
        easing(t) {
          return t
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.marker {
  border: none;
  border-radius: 50%;
}
.content {
  width: 100%;
  height: 100%;
  #map {
    width: 100%;
    height: 100%;
  }
}
</style>